<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref({})
// 登录状态
const isLoggedIn = ref(false)

// 计算显示的用户名
const displayName = computed(() => {
  if (!isLoggedIn.value) {
    return '点击登录/注册'
  }
  
  if (userInfo.value.nickName && userInfo.value.nickName.trim() !== '') {
    return userInfo.value.nickName
  } else if (userInfo.value.userName) {
    return userInfo.value.userName
  } else {
    return '用户' // 默认显示
  }
})

// 页面显示时获取用户信息
onShow(() => {
  const token = uni.getStorageSync('token')
  isLoggedIn.value = !!token
  
  const storedUserInfo = uni.getStorageSync('userInfo')
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
  }
})

// 处理用户信息区域点击
const handleUserInfoClick = () => {
  if (!isLoggedIn.value) {
    // 未登录时跳转到登录页面
    uni.navigateTo({
      url: '/pages/user/register',
      fail: (err) => {
        console.error('跳转到登录页失败:', err)
        uni.redirectTo({
          url: '/pages/user/register'
        })
      }
    })
  }
}

// 返回到主页
const goToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除存储的用户信息和token
        uni.removeStorageSync('userInfo')
        uni.removeStorageSync('token')
        
        // 显示退出成功提示
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
          duration: 1500,
          success: () => {
            // 延迟执行跳转，等待Toast显示完成
            setTimeout(() => {
              // 尝试使用redirectTo跳转到登录页
              uni.redirectTo({
                url: '/pages/user/register',
                success: () => {
                  console.log('成功跳转到登录页')
                },
                fail: (err) => {
                  console.error('redirectTo失败:', err)
                  // 如果redirectTo失败，尝试使用navigateTo
                  uni.navigateTo({
                    url: '/pages/user/register',
                    fail: (e) => {
                      console.error('navigateTo也失败:', e)
                      // 最后尝试回到首页
                      setTimeout(() => {
                        uni.switchTab({
                          url: '/pages/index/index'
                        })
                      }, 300)
                    }
                  })
                }
              })
            }, 1500)
          }
        })
      }
    }
  })
}

// 联系客服
const contactService = () => {
  // 这里可以实现联系客服的逻辑
  uni.showToast({
    title: '正在连接客服...',
    icon: 'none'
  })
}

// 我要吐槽
const feedback = () => {
  uni.showToast({
    title: '功能开发中...',
    icon: 'none'
  })
}

// 关于我们
const aboutUs = () => {
  uni.showToast({
    title: '功能开发中...',
    icon: 'none'
  })
}
</script>

<template>
  <view class="container">
<!--    顶部导航栏
    <view class="nav-bar">
      <view class="nav-back" @click="goToHome">
        <text class="icon-back">←</text>
      </view>
      <view class="nav-title">个人中心</view>
    </view> -->
    
    <!-- 用户信息区域 -->
    <view class="user-info" @click="handleUserInfoClick">
      <image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
      <view class="user-detail">
        <text class="nickname">{{ displayName }}</text>
        <text class="slogan" v-if="isLoggedIn">期待与你一起实现理想家</text>
        <text class="slogan" v-else>登录后体验更多功能</text>
      </view>
      <text class="arrow-right" v-if="!isLoggedIn">></text>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-list">
      <!-- 联系客服 -->
      <view class="menu-item" @click="contactService">
        <view class="menu-icon">
          <text class="iconfont icon-service"></text>
        </view>
        <view class="menu-content">
          <text class="menu-title">联系客服</text>
          <text class="menu-desc">工作时间:9:00-18:00</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
      
      <!-- 我要吐槽 -->
      <view class="menu-item" @click="feedback">
        <view class="menu-icon">
          <text class="iconfont icon-feedback"></text>
        </view>
        <view class="menu-content">
          <text class="menu-title">我要吐槽</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
      
      <!-- 关于我们 -->
      <view class="menu-item" @click="aboutUs">
        <view class="menu-icon">
          <text class="iconfont icon-about"></text>
        </view>
        <view class="menu-content">
          <text class="menu-title">关于我们</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
    </view>
    
    <!-- 退出登录 - 仅在登录状态显示 -->
    <view class="logout-btn" @click="handleLogout" v-if="isLoggedIn">
      <text>退出登录</text>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: relative;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
}

.nav-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  background-color: #f0f0f0;
}

.user-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.slogan {
  font-size: 26rpx;
  color: #999;
}

.arrow-right {
  font-size: 30rpx;
  color: #ccc;
}

.menu-list {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.iconfont {
  font-size: 40rpx;
  color: #333;
}

.icon-service:before {
  content: "\e600";
}

.icon-feedback:before {
  content: "\e601";
}

.icon-about:before {
  content: "\e602";
}

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-title {
  font-size: 30rpx;
  color: #333;
}

.menu-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.menu-arrow {
  font-size: 30rpx;
  color: #ccc;
}

.logout-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ffffff;
  color: #999;
  font-size: 32rpx;
  border-radius: 8rpx;
  margin: 60rpx auto 0;
}
</style>